<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PCR排刀机器人申请</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.8.0/qs.min.js"></script>
</head>
<style>
    #form {
        width: 40%;
        margin: 5% auto
    }
    #line{
        margin: 5% 0;
    }
</style>
<body>
<div id="app">
    <el-divider content-position="left" id="line">PCR排刀机器人</el-divider>
    <el-form :model="data" ref="registerForm" label-width="80px" id="form" :rules="rules">
        <el-form-item label="QQ号" prop="qqNumber">
            <el-input v-model="data.qqNumber" placeholder="请输入QQ号"></el-input>
        </el-form-item>
        </el-form-item>
        <el-form-item label="QQ群" prop="qqGroup">
            <el-input v-model="data.qqGroup" placeholder="请输入QQ群号"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
            <el-input v-model="data.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="validCode">
            <el-input v-model="data.validCode" placeholder="请输入验证码" style="width: 50%"></el-input>
            <el-button @click="getValid" style="margin-left: 5%" :disabled="valid_cd>0">{{valid_cd<=0?'获取验证码':(valid_cd+'秒后重新获取')}}</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('registerForm')">提交</el-button>
            <el-button @click="clear('registerForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            data: {
                qqGroup: '',
                qqNumber: '',
                phone: '',
                validCode: '',
            },
            valid_cd: 0,
            rules: {
                qqGroup: [{ required: true, message: '请输入qq群', trigger: 'blur' }],
                qqNumber: [{ required: true, message: '请输入qq号', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                validCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            }
        },
        methods: {
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = this.data;

                        axios.post('/register', Qs.stringify(params))
                            .then(res => {
                            if (res.data === "OK") {
                            this.clear(formName);
                            this.$message.success("注册成功")
                        } else {
                            this.$message.error(res.data)
                        }
                    })
                    .catch(err => {
                            this.$message.error("注册失败")
                        })
                    } else {
                        this.$message.error('注册失败');
                return false;
            }
            });

            },
            clear(formName) {
                this.$refs[formName].resetFields();
            },
            getValid(){
                if(!this.data.phone){
                    this.$message.error("请先输入手机号!");
                    return;
                }
                this.valid_cd = 60;
                let it = window.setInterval(()=>{
                    this.valid_cd -= 1;
                if(this.valid_cd === 0){
                    clearInterval(it);
                }
            },1000);

                let data = {
                    phone: this.data.phone
                }
                axios.post("/validCode", Qs.stringify(data))
                    .then(res => {
                    if(res.data === "OK"){
                    console.log(res)
                } else {
                    this.$message.error(res.data.data)
                }
            })
            .catch(err => {
                    this.$message.error("获取验证码失败");
            })
            }
        },
    })
</script>
</html>